<html>
<head>
  <script src="/jquery-3.3.1.min.js"></script>
  <script src="/jquery.form.js"></script>
  <style>
    #img_to_show:hover{
      cursor: pointer;
    }
  </style>
</head>
<body>
<h2>Register!</h2>
<form id="form1" action="/user/register" method="post">
  username:<input name="username">
  <br>
  password:<input type="password" name="password">
  <br>
  <input type="hidden" name="photo">
  photo:
  <input type="file" name="img" onchange="upload_img();" style="display: none;">
  <br>
  <img id="img_to_show" width="100px" height="100px"
       src="http://127.0.0.1:8088/img/default.png" onclick="select_img();">
  <br>
  <button>register</button>
</form>
</body>
<script>
  function upload_img(){
      // $(表单).ajaxSubmit();
      // 1. 异步上传图片
      $("#form1").ajaxSubmit({
          type:'post',
          url:'/upload',
          success:function(path){
              // 2. 获取上传后的图片路径'
              // alert(path);
              // 3. 修改img标签的src属性
              $("#img_to_show").prop("src",path);
              // 4. 修改图片路径表单项的value
              $("input[name='photo']").val(path);
          }
      });

  }

  function select_img(){
      $("input[name='img']").click();
  }
</script>
</html>
